<template>
	<view>
		<u-popup :show="addressListBottom" mode="bottom"  @close="close" @open="open">
			<view class="poput-box">
				<view class="poput-title">
					<view>
						<u-icon class="poput-title-icon" color="white"  @click="closePopup"  size="20" name="close"></u-icon>
					</view>
					<view class="poput-title-text">
						选择地址
					</view>
					<view>
						<u-icon class="poput-title-icon"  @click="closePopup"  size="20" name="close"></u-icon>
					</view>
				</view>
				<view>
					<view @click="query(item)" class="address-item" v-for="item in addressList">
						<view >
							<view>{{item.userName}}  {{item.userMobile}}<span class="isDefault" v-show="item.isDefault===1?true:false">默认</span></view>
							<view>{{item.province}}  {{item.city}}  {{item.county}} {{item.address}}</view>
						</view>
						<view style="display: flex;">
							<view style="display: flex;font-size: 24rpx;margin-right: 5rpx;"><u-icon name="edit-pen" size="30rpx"></u-icon>编辑</view>
						</view>
					</view>
					
				</view>
			<!-- 	<view class="intelligence-box">
					<view>智能识别</view>
					<view>
						<u--textarea height="100rpx" v-model="intelligence" placeholder="请输入内容" count="true" 
						
						></u--textarea>
					</view>
				</view> -->
				<view class="submit-box">
					<view class="submit-btn" @click="submit()">保存</view>
				</view>
			</view>
			 <u-toast ref="uToast"></u-toast>
		</u-popup>
	</view>
</template>

<script>
	import {addressList,saveAddress} from "@/api/user.js"
	export default {
		props:['addressListBottom'],
		data() {
			return {
				intelligence:"",
				defaultAddress:false,
				showSex: false,
				model1: {
					userInfo: {
						addres: '',
						addresInfo: '',
						userName:'',
						userMobile:'',
						provinceId:'',
						cityId:'',
						countyId:'',
						province:'',
						city:'',
						county:'',
						isDefault:0
					},
				},
				radio: '',
				switchVal: false,
				pickerShow: false,
				  columns: [], // 当前显示的列数据
				  provinceList: [], // 所有省份数据
				  cityList: [], // 当前省份下的城市
				  districtList: [], // 当前城市下的区县
			}
		},
		methods: {
			query(item){
				this.$emit('child-addressList', item);
			},
			closePopup(){
				this.$emit('child-close', false);
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		mounted() {
			addressList({
					phone:"17689292772"
				}).then((res) => {
					if (res.data.code == '0') {
						console.log(res)
						console.log(res.data.page.list)
						this.addressList=res.data.page.list;
						console.log("sdfds",this.addressList)
				}
			})
		}
	}
</script>

<style lang="scss" scoped>

		
	.isDefault{
		color:blue;
		font-size: 18rpx;
		background-color: whitesmoke;
		border-radius: 8rpx;
		padding: 3rpx 10rpx;
		margin-left:15rpx;
	}
	.address-item{
		border-radius: 25rpx;
		background-color: white;
		padding: 30rpx;
		margin: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.address-box{
		
	}
	.address-item{
		
		display: flex;
		align-items: center;
		padding:30rpx;
		border-bottom: 1rpx solid gainsboro;
	}
	.submit-box{
		width:100%;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.submit-btn{
		text-align: center;
		height:80rpx;
		line-height: 80rpx;
		margin:20rpx;
		background-color: blue;
		color:white;
		border-radius: 50rpx;
	}
	.intelligence-box{
		padding: 20rpx;
		margin-top: 30rpx;
	}
	.default{
		position: absolute;
		right: 40rpx;
	}
	.default-address-one{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		padding: 30rpx 40rpx 10rpx 10rpx;
	}
	.default-address{
		width: 100%;
		margin: 30rpx 30rpx 0rpx 20rpx;
		height: 20rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.form-address{
		padding: 20rpx;
	}
	.weixin-address{
		border-radius: 25rpx;
		border:1rpx solid gainsboro;
		font-size: 15rpx;
		padding: 5rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
	}
	.poput-list-left{
		display: flex;
	}
	.poput-list{
		margin: 20rpx 20rpx 0rpx 30rpx;
		height: 20rpx;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.poput-title-icon{
		position: absolute;
		right:25rpx;
		top:25rpx;
	}
	.poput-box{
		border-radius: 15rpx 15rpx 0rpx 0rpx;
		height: 800rpx;
		position: relative;
		background-color: whitesmoke;
	}
	.poput-title-text{
		text-align: center;
		font-size: 30rpx;
	}
	.poput-title{
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
